<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type='text/javascript' src='../vue.js'></script>
    
    <style>
        .mystyle {
            background-color:blueviolet ;
        }
    </style>

</head>
<body>
    <div id="root">
        <!-- 使用组件 -->
        <school></school>
        <hr>
        <student></student>
        <hr> 
        <hello></hello>
    </div>

    <div id="root2" style="background-color: bisque;">
        <!-- 使用组件 -->
         <h1> 我是另外一个vm管理的div </h1>
        <hr>
             <hello></hello>
        <hr> 
    </div>

    <script type='text/javascript'>
        // 创建组件
        // 注意点: 相比new Vue({})
        // 1、 不允许写el配置项
        // , 否则报错“option "el" can only be used during instance creation with the `new` keyword.”
        // 2、data需要写成函数式data() { return {xxx: xxx ....} }
        // 3、template配置项 必须且只能有 一个 根节点
       const school = Vue.extend({
            template: ` <div :class=bgClass>
             <h1>学校名称{{schoolName}}</h1>
             <h1>学校地址{{schoolAddress}}</h1>
             <button @click=changeBgColor> 点我改变背景颜色 </button>
             </div>`,
             data(){
                return{
                    schoolName: "深圳大学",
                    schoolAddress:"深南大道1203号",
                    bgClass: ''
                }
             },
             methods: {
                changeBgColor(){
                    console.log("changeBgColor");
                    this.bgClass = 'mystyle'
                }
             },
        })

       const student = Vue.extend({
            template:`<div>
            <h1>学生名称{{name}}</h1>
            <h1>学生年龄{{age}}</h1>
            </div>`,
            data() {
                return {
                    name: '马化云',
                    age: 53
                }
            },
        })

        Vue.component("hello", {
            template:`<div>
            <h1> {{name}} </h1>
            </div>`,
        
            data() {
                return {
                    name: 'hello 我是全局组件',
                    age: 53
                }
            },
        })


        new Vue({ 
            el: '#root',
            data: {
                key:"value"
            },
            //注册组件
            components:{
                school,
                student
            }
            
        })
        new Vue({ 
            el: '#root2',
            data: {
                key:"value"
            },
        })
    </script>
    
</body>
</html>